import React, { useState, useEffect } from 'react';
import { Image, View } from '@tarojs/components';
import closeImg from '@/giftCardSubPack/images/giftCard/close.png';
import { AtButton } from 'taro-ui';
import failImg from '@/images/common/fail.png';
import Taro from '@tarojs/taro';

import './index.scss';

const DeliveryTimeSelect = React.forwardRef((props) => {
  const [timeRange, setTimeRange] = useState([]);
  const selectedRange = props.timeRange;

  function filterTimeRange(timeList) {
    return timeList.map((item, index) => {
      return {
        selected: selectedRange ? selectedRange === item.startTime : index === 0,
        label: item.startTime,
        ...item,
      };
    });
  }

  useEffect(() => {
    props
      .dispatch({
        type: 'otherApi/getDeliveryTime',
        payload: { activityId: props.favouredId, orgId: props.orgId },
      })
      .then(({ deliveryTimeList }) => {
        setTimeRange(filterTimeRange(deliveryTimeList));
      })
      .catch(() => {
        return Taro.showToast({
          mask: true,
          title: '配送时间失效',
          image: failImg,
          duration: 2000,
        });
      });
  }, []);

  function handleTimeRange(i) {
    setTimeRange(
      timeRange.map((item, index) => {
        item.selected = i === index;

        return item;
      }),
    );
  }

  return (
    <View className="deliveryTimeSelect">
      <View className="mask" onClick={() => props.setIsShow(false)} />
      <View className="inner">
        <View className="head">
          <View className="title">配送时间段</View>
          <Image src={closeImg} className="close-icon" onClick={() => props.setIsShow(false)} />
        </View>

        <View className="split"></View>

        <View className="time">
          <View className="left">
            <AtButton size="small" className="today selected">
              今天
            </AtButton>
          </View>
          <View className="right">
            {timeRange.map((item, index) => {
              return (
                <View
                  key={item.label}
                  className="time-item"
                  onClick={() => {
                    return handleTimeRange(index);
                  }}
                >
                  <View className="prefix">约</View>
                  <View className="time-value">{item.label}</View>
                  <View className={`time-select ${item.selected ? 'selected' : ''}`}></View>
                </View>
              );
            })}
          </View>
        </View>

        <View className="split"></View>

        <View className="bottom">
          <AtButton
            className="btn"
            onClick={() => {
              const time = (
                timeRange.find((item) => {
                  return item.selected === true;
                }) || {}
              ).label;
              props.setIsShow(false);
              props.handleDeliveryTimeChange(time);
            }}
          >
            确认选择
          </AtButton>
        </View>
      </View>
    </View>
  );
});
export default DeliveryTimeSelect;
